<template>
  <view class="flex align-center fixed-bottom" style="height: 140rpx; background-color: #f0eaea">
    <input
      type="text"
      v-model="content"
      style="height: 100rpx"
      :placeholder="obj.toname ? '回复:' + obj.toname : '文明发言'"
      class="bg-light p-1 flex-1 ml-2 rounded"
      :focus="focus"
      @confirm="submit"
      @blur="$emit('blur')"
    />
    <view
      class="flex iconfont icon-fabiao font-lg justify-center align-center animated"
      style="width: 100rpx; font-size: 60rpx"
      hover-class="animate__jello color text-main"
      @click="submit"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    focus: {
      type: Boolean,
      default: false,
    },
    obj: {
      type: Object,
    },
  },
  data() {
    return {
      content: '',
    }
  },
  methods: {
    submit() {
      // 判断是否为空
      if (this.content === '') {
        return uni.showToast({
          title: '消息不能为空哦~',
          icon: 'none',
        })
      }
      this.$emit('submit', this.content)
      // 清空输入框
      this.content = ''
    },
  },
}
</script>

<style>
@import url('../animate.min.css');
</style>
